<template>
  <div class="pomodoro-view">
    <div class="timer-settings">
      <div class="duration-input-group">
        <label for="pomodoro-duration">专注 (分钟):</label>
        <input type="number" id="pomodoro-duration" v-model.number="pomodoroDurationMinutes" @change="handleDurationChange('pomodoro')" min="1">
      </div>
      <div class="duration-input-group">
        <label for="short-break-duration">短休息 (分钟):</label>
        <input type="number" id="short-break-duration" v-model.number="shortBreakDurationMinutes" @change="handleDurationChange('shortBreak')" min="1">
      </div>
      <div class="duration-input-group">
        <label for="long-break-duration">长休息 (分钟):</label>
        <input type="number" id="long-break-duration" v-model.number="longBreakDurationMinutes" @change="handleDurationChange('longBreak')" min="1">
      </div>
    </div>

    <div class="timer-type-selector">
      <button @click="selectTimerType('pomodoro')" :class="{ active: timerType === 'pomodoro' }">专注</button>
      <button @click="selectTimerType('shortBreak')" :class="{ active: timerType === 'shortBreak' }">短休息</button>
      <button @click="selectTimerType('longBreak')" :class="{ active: timerType === 'longBreak' }">长休息</button>
    </div>

    <div class="timer-display">
      {{ formattedTime }}
    </div>

    <div class="timer-controls">
      <button v-if="!isRunning && !isPaused" @click="startTimer" class="control-button primary">开始</button>
      <button v-if="isRunning && !isPaused" @click="pauseTimer" class="control-button warning">暂停</button>
      <button v-if="isRunning && isPaused" @click="resumeTimer" class="control-button primary">继续</button>
      <button @click="resetTimer" class="control-button secondary">重置</button>
      <button v-if="isRunning || isPaused" @click="skipTimer" class="control-button secondary">跳过</button>
    </div>

    <div class="status-display">
      <p>当前状态: {{ currentStatusText }}</p>
    </div>
  </div>
</template>

<script>
const POMODOROS_UNTIL_LONG_BREAK = 4;

export default {
  name: 'PomodoroView',
  data() {
    return {
      isRunning: false,
      isPaused: false,
      timerType: 'pomodoro', // 'pomodoro', 'shortBreak', 'longBreak'
      currentTime: 0, // Initialized to 0, will be set by resetTimer
      pomodoroDurationMinutes: 25,
      shortBreakDurationMinutes: 5,
      longBreakDurationMinutes: 15,
      pomodorosCompleted: 0,
      pomodorosUntilLongBreak: POMODOROS_UNTIL_LONG_BREAK,
      timerId: null,
    };
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.currentTime / 60);
      const seconds = this.currentTime % 60;
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    },
    currentStatusText() {
      if (this.timerType === 'pomodoro') return '专注时间';
      if (this.timerType === 'shortBreak') return '短时休息';
      if (this.timerType === 'longBreak') return '长时休息';
      return '';
    }
  },
  methods: {
    startTimer() {
      if (this.isRunning && !this.isPaused) return; // Already running

      this.isRunning = true;
      this.isPaused = false;
      
      if (this.timerId) clearInterval(this.timerId);

      this.timerId = setInterval(() => {
        if (this.currentTime > 0) {
          this.currentTime--;
        } else {
          this.handleTimerEnd();
        }
      }, 1000);
    },
    pauseTimer() {
      if (!this.isRunning || this.isPaused) return;
      this.isPaused = true;
      if (this.timerId) {
        clearInterval(this.timerId);
        this.timerId = null;
      }
    },
    resumeTimer() {
      if (!this.isRunning || !this.isPaused) return;
      this.isPaused = false;
      this.startTimer(); // restart interval
    },
    resetTimer(newType = null) {
      if(this.timerId) clearInterval(this.timerId);
      this.timerId = null;
      this.isRunning = false;
      this.isPaused = false;

      if (newType) {
        this.timerType = newType;
      }

      if (this.timerType === 'pomodoro') {
        this.currentTime = this.pomodoroDurationMinutes * 60;
      } else if (this.timerType === 'shortBreak') {
        this.currentTime = this.shortBreakDurationMinutes * 60;
      } else if (this.timerType === 'longBreak') {
        this.currentTime = this.longBreakDurationMinutes * 60;
      }
    },
    skipTimer() {
      this.handleTimerEnd();
    },
    handleTimerEnd() {
      if(this.timerId) clearInterval(this.timerId);
      this.timerId = null;
      this.isRunning = false;
      this.isPaused = false;
      
      const notificationTitle = '';
      let notificationBody = '';

      if (this.timerType === 'pomodoro') {
        this.pomodorosCompleted++; 
        if (this.pomodorosCompleted % this.pomodorosUntilLongBreak === 0) {
          notificationBody = '太棒了！是时候进行一次长休息了。';
          this.selectTimerType('longBreak'); 
        } else {
          notificationBody = '专注时间结束，开始短时休息吧。';
          this.selectTimerType('shortBreak'); 
        }
      } else { // Break ended
        if (this.timerType === 'shortBreak') {
          notificationBody = '短休息结束，准备开始新的专注吧！';
        } else if (this.timerType === 'longBreak') {
          notificationBody = '长休息结束，准备开始新的专注吧！';
        }
        this.selectTimerType('pomodoro'); 
      }

      if (window.electronAPI && window.electronAPI.showPomodoroNotification) {
        window.electronAPI.showPomodoroNotification({ title: notificationTitle, body: notificationBody });
      } else {
        console.warn('ElectronAPI for notifications not available.');
        alert(`${notificationTitle}\n${notificationBody}`); 
      }
    },
    selectTimerType(type) {
      this.timerType = type;
      this.resetTimer(type);
    },
    handleDurationChange(typeChanged) {
      // Ensure durations are at least 1 minute
      if (this.pomodoroDurationMinutes < 1) this.pomodoroDurationMinutes = 1;
      if (this.shortBreakDurationMinutes < 1) this.shortBreakDurationMinutes = 1;
      if (this.longBreakDurationMinutes < 1) this.longBreakDurationMinutes = 1;

      // If the currently selected timer type's duration was changed AND it's not running/paused,
      // update the displayed currentTime immediately.
      if (this.timerType === typeChanged && !this.isRunning && !this.isPaused) {
        this.resetTimer(this.timerType);
      }
      // Future: Persist these changes (e.g., to Vuex or electron-store)
    }
  },
  created() {
    this.selectTimerType('pomodoro'); // Initialize with pomodoro and its default duration
  },
  beforeDestroy() {
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  }
};
</script>

<style scoped>
.pomodoro-view {
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  gap: var(--spacing-lg);
}

.timer-settings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 320px;
  align-items: stretch;
}

.duration-input-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.duration-input-group label {
  flex-basis: 130px;
  text-align: left;
  font-size: var(--font-size-base);
  color: var(--theme-text-secondary);
}

.duration-input-group input[type="number"] {
  flex-grow: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: var(--border-width) solid var(--theme-border-input);
  background-color: var(--theme-bg-input);
  color: var(--theme-text-input);
  border-radius: var(--border-radius-base);
  text-align: center;
  min-width: 70px;
}

.duration-input-group input[type=number]::-webkit-inner-spin-button, 
.duration-input-group input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.duration-input-group input[type=number] {
  -moz-appearance: textfield;
}

.timer-type-selector {
  display: flex;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: var(--border-width) solid var(--theme-border-secondary);
  margin-bottom: var(--spacing-lg);
}

.timer-type-selector button {
  flex-grow: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-secondary);
  border: none;
  border-right: var(--border-width) solid var(--theme-border-secondary);
  cursor: pointer;
  transition: background-color var(--transition-duration-short), color var(--transition-duration-short);
  border-radius: 0;
}

.timer-type-selector button:last-child {
  border-right: none;
}

.timer-type-selector button:hover:not(.active) {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

.timer-type-selector button.active {
  background-color: var(--theme-accent-primary);
  color: var(--theme-text-on-accent);
  font-weight: var(--font-weight-semibold);
}

.timer-display {
  font-size: 80px;
  font-weight: var(--font-weight-bold);
  color: var(--theme-accent-primary);
  margin-bottom: var(--spacing-sm);
  font-family: 'Roboto', sans-serif;
  line-height: 1.1;
}

.timer-controls {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.control-button {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-duration-short), transform var(--transition-duration-short), box-shadow var(--transition-duration-short);
  min-width: 120px;
  font-weight: var(--font-weight-medium);
}

.control-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--theme-shadow-color-rgb), var(--theme-shadow-opacity-medium));
}

.control-button.primary {
  background-color: var(--theme-accent-primary);
  color: var(--theme-text-on-accent);
}
.control-button.primary:hover {
  background-color: var(--theme-accent-primary-hover);
}

.control-button.warning {
  background-color: var(--theme-accent-warning);
  color: var(--theme-text-on-accent);
}
.control-button.warning:hover {
   background-color: var(--theme-accent-warning-hover);
}

.control-button.secondary {
  background-color: var(--theme-bg-button-secondary);
  color: var(--theme-text-primary);
  border: var(--border-width) solid var(--theme-border-secondary);
}
.control-button.secondary:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-border-primary);
}

.status-display {
  font-size: var(--font-size-base);
  color: var(--theme-text-secondary);
  min-height: calc(var(--font-size-base) * var(--line-height-base));
}
</style> 